<template>
  <div>
    <a-row :gutter="24" style="margin-bottom: 15px;margin-top: 20px;">
      <a-col :span="6" :loading="loading">
        <div class="dashboard-card">
          <div class="card-header">
            <div class="card-title">总资产数量</div>
            <div class="card-icon  card-blue">
              <a-icon type="shop" />
            </div>
          </div>
          <div class="card-value">{{ cardData.assetTotal }}</div>
          <div class="card-desc">管理资产总数</div>
        </div>
      </a-col>
      <a-col :span="6" :loading="loading">
        <div class="dashboard-card">
          <div class="card-header">
            <div class="card-title">运营中资产</div>
            <div class="card-icon card-green">
              <a-icon type="home" />
            </div>
          </div>
          <div class="card-value">{{ cardData.useAssetTotal }}</div>
          <div class="card-desc">使用率 {{ cardData.useRate }}%</div>
        </div>
      </a-col>
      <a-col :span="6" :loading="loading">
        <div class="dashboard-card">
          <div class="card-header">
            <div class="card-title">闲置资产</div>
            <div class="card-icon card-orange">
              <a-icon type="stop" />
            </div>
          </div>
          <div class="card-value">{{cardData.leaveAssetTotal}}</div>
          <div class="card-desc">待盘活资产</div>
        </div>
      </a-col>
      <a-col :span="6" :loading="loading">
        <div class="dashboard-card">
          <div class="card-header">
            <div class="card-title">总建筑面积</div>
            <div class="card-icon card-purple">
              <a-icon type="build" />
            </div>
          </div>
          <div class="card-value">{{ cardData.floorArea }}</div>
          <div class="card-desc">空间资产总㎡</div>
        </div>
      </a-col>
    </a-row>
    <a-card :loading="loading" :bordered="false" style="border-radius: 5px;" :body-style="{padding: '0'}">
      <div>
        <a-row :gutter="24" class="section-header">
          <a-col :span="24" class="section-title">
            <a-icon type="bar-chart" /> 用户概况
          </a-col>
        </a-row>
        <a-row>
          <a-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
            <div class="chart-container">
              <bar title="用户统计" :dataSource="userArr" yaxisText="数量"/>
            </div>
          </a-col>
          <a-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
            <div class="chart-container">
              <bar title="角色统计" :dataSource="roleArr" yaxisText="数量"/>
            </div>
          </a-col>
        </a-row>
      </div>
    </a-card>
  </div>
</template>

<script>
  import Bar from '@/components/chart/Bar'
  import { getAction } from '@/api/manage'
  import { getLoginfo } from '@/api/api'

  export default {
    name: "IndexChart",
    components: {
      Bar
    },
    data() {
      return {
        loading: true,
        center: null,
        loginfo:{},
        cardData:{
          assetTotal:0,
          useAssetTotal:0,
          useRate:0,
          leaveAssetTotal:0,
          floorArea:0,
        },
        url: {
          indexTotal: "/asset/indexTotal/indexTotal",
          userTotal: "/asset/indexTotal/userTotal",
          roleTotal: "/asset/indexTotal/roleTotal",
        },
        userArr: [],
        roleArr: [],
      }
    },
    created() {
      setTimeout(() => {
        this.loading = !this.loading
      }, 1000)
      this.initLogInfo();
    },
    methods: {
      initLogInfo () {
        getLoginfo(null).then((res)=>{
          if(res.success){
            Object.keys(res.result).forEach(key=>{
              res.result[key] =res.result[key]+""
            })
            this.loginfo = res.result;
          }
        })
        getAction(this.url.indexTotal, {}).then((res) => {
          if (res.success) {
            this.cardData = res.result;
          }
        });
        getAction(this.url.userTotal, {}).then((res) => {
          if (res.success) {
            this.userArr = res.result;
          }
        });
        getAction(this.url.roleTotal, {}).then((res) => {
          if (res.success) {
            this.roleArr = res.result;
          }
        });
      },
    }
  }
</script>

<style lang="less" scoped>
  .circle-cust{
    position: relative;
    top: 28px;
    left: -100%;
  }
  .extra-wrapper {
    line-height: 55px;
    padding-right: 24px;

    .extra-item {
      display: inline-block;
      margin-right: 24px;

      a {
        margin-left: 24px;
      }
    }
  }

  /* 首页访问量统计 */
  .head-info {
    position: relative;
    text-align: left;
    padding: 0 32px 0 0;
    min-width: 125px;

    &.center {
      text-align: center;
      padding: 0 32px;
    }

    span {
      color: rgba(0, 0, 0, .45);
      display: inline-block;
      font-size: .95rem;
      line-height: 42px;
      margin-bottom: 4px;
    }
    p {
      line-height: 42px;
      margin: 0;
      a {
        font-weight: 600;
        font-size: 1rem;
      }
    }
  }
  .dashboard-card {
    background: white;
    border-radius: 10px;
    padding: 15px 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s, box-shadow 0.3s;
  }
  .dashboard-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  }
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
  }
  .card-title {
    font-size: 18px;
    color: #555;
    font-weight: 600;
  }
  .card-icon {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: white;
  }
  .card-value {
    font-size: 24px;
    font-weight: bold;
    color: #333;
    margin-bottom: 5px;
  }
  .card-desc {
    color: #777;
    font-size: 0.9rem;
  }
  .card-blue {
    background: linear-gradient(45deg, #2196F3, #21CBF3);
  }
  .card-orange {
    background: linear-gradient(45deg, #FF9800, #FFC107);
  }
  .card-green {
    background: linear-gradient(45deg, #4CAF50, #8BC34A);
  }
  .card-purple {
    background: linear-gradient(45deg, #9C27B0, #E91E63);
  }
  .list-button {
      margin: 0 8px 8px 0;
  }
  .section-header{
    // margin-bottom: 20px;
  }
  .section-title{
    font-size: 20px;
    color: #333;
    font-weight: 600;
    margin-top: 20px;
    margin-left: 20px;
  }
  .chart-container {
    background: white;
    border-radius: 10px;
    padding: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s, box-shadow 0.3s;
    margin: 20px;
  }

  .chart-container:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  }
</style>